<template>
    <div style="height:100vh;background:#F8F8F8;">
        <van-nav-bar
        title="航班信息"
        left-text="返回"
        left-arrow
        @click-left="$router.back(-1)"
        />

        <div class="info_box">

            <div><span>{{ data.t_departCity }}-{{ data.t_destination }}</span>2020年5月14日 2时25分</div>

            <div>车票提供：{{ data.t_name }}</div>

        </div>

        <div class="seat_box">
            <h1>选择舱等及价格</h1>

            <div class="seat_info" v-for="(v,k) in data.t_seat" :key="k">
                <div class="seat_left">
                    <div class="seat_name">{{ v.name }}</div>
                    <div class="seat_money">￥{{ v.pric }}</div>
                </div>

                <div class="seat_right">

                    <div class="seat_btn" @click="purchase(k)">
                        <div class="btn_text">订</div>
                        <div class="btn_num">剩{{ v.count }}张</div>
                    </div>

                </div>
                
            </div>
        </div>

    </div>
</template>

<script>
export default {

    data(){
        
        return {
            data:[],
            id: null
        }

    },
    methods:{
        getData(){

            let that = this
            

            this.$axios.post('/ticket/details',this.$qs.stringify({id: this.id})).then( (res) => {

                if(res.data.code==1){

                    that.data = res.data.data

                }else{

                    if(res.data.code==-1){

                        that.$router.back(-1)

                    }

                    that.$toast.fail(res.data.msg)

                }

            } ).catch( (err) => {

                that.$toast.fail('网络繁忙~')

            } )

        },
        purchase(key=0){

            this.$dialog.confirm({
                title: '订购提示',
                message: '确认订购该座位吗？',
            })
            .then(() => {


            let that = this

            let toast1=this.$toast.loading({
                message:'订购中...',
                duration:0,
                forbidclick:true
            })

            this.$axios.post('/ticket/purchase',this.$qs.stringify({id:this.id,seat:key})).then( (res) => {

                if(res.data.code==1){

                    that.$set(that.data.t_seat[key],'count',that.data.t_seat[key].count-1)

                    that.$toast.success('订购成功~')

                }else{

                    if(res.data.code==-1){

                        that.$dialog.confirm({
                            title: '登录提示',
                            message: '您还未登录，是否前往登录',
                        })
                        .then(() => {
                            that.$router.push({path:'/login'})
                        })
                        .catch(() => {
                         // on cancel
                         });

                        toast1.clear()

                    }else{
                        that.$toast.fail(res.data.msg)
                    }

                }

            } ).catch( (err) => {

                that.$toast.fail('网络繁忙~')

            } )


            })
            .catch(() => {
            // on cancel
             });

            

        }
    },
    created(){

        this.id = this.$route.query.id

        this.getData()

    }
    
}
</script>

<style scoped>

    div.info_box{
        width:690rem;
        padding: 20rem 10rem;
        background-color: #fff;
        border-radius: 15rem;
        margin:20rem auto;
        font-size:26rem;
        color:#717376;
    }
    div.info_box span{
        margin-right: 20rem;
        color:#000;
    }
    div.info_box div:last-child{
        margin-top:20rem;
    }
    div.seat_box{
        width:690rem;
        margin:0 auto;
    }
    div.seat_box h1{
        font-size:32rem;
    }
    div.seat_box div.seat_info{
        padding: 20rem 10rem;
        width:670rem;
        background-color: #fff;
        border-radius: 15rem;
        margin-top: 20rem;
        display: flex;
    }
    div.seat_box div.seat_info .seat_left{
        width:550rem;
    }
    div.seat_box div.seat_info .seat_right{
        width:100rem;
    }
    div.seat_box div.seat_info div.seat_name{
        color:#000;
        font-size: 30rem;
    }
    div.seat_box div.seat_info div.seat_money{
        color:#ff4a26;
        font-size:32rem;
        font-weight: 600;
        margin-top:20rem;
    }
    div.seat_box div.seat_info div.seat_btn{
        width:100rem;
        min-height: 100rem;
        border:1px solid #FFDF3F;
        border-radius: 10rem;
        text-align: center;
        color:#666;
        font-size:22rem;
    }
    div.seat_box div.seat_info div.seat_btn div.btn_text{
        width:100rem;
        height: 70rem;
        line-height: 70rem;
        background-color: #FFDF3F;
        font-size:28rem;
        color:#000;
    }
</style>